import React, { useEffect, useState } from 'react'
import { View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { getTwoBezierPoints } from '@/utils//utils'
import './index.scss'

// const worker = Taro.createWorker('../../workers/animate')



type Point = [number, number]

interface FlywayProps {
  start: Point
  onComplete?: Function
}

export default (props: FlywayProps) => {
  const { start = [10, 200], onComplete } = props
  const [position, setPosition] = useState<Point>(start)
  const sysInfo = Taro.getSystemInfoSync()
  useEffect(() => {
     const points = getTwoBezierPoints(start, [50, sysInfo.windowHeight - 104], 20)
    // let points=[[321.7,173.4525],[307.40000000000003,167.81],[293.09999999999997,165.0725],[278.80000000000007,165.24000000000004],[264.5,168.3125],[250.2,174.29],[235.9,183.1725],[221.60000000000002,194.96],[207.3,209.65249999999997],[193,227.24999999999997],[178.70000000000002,247.7525],[164.4,271.15999999999997],[150.1,297.4725],[135.79999999999998,326.69000000000005],[121.49999999999997,358.8125000000001],[107.19999999999996,393.8400000000001],[92.89999999999995,431.77250000000015],[78.59999999999994,472.6100000000002],[64.29999999999991,516.3525000000003],[49.999999999999936,563.0000000000002]]
    const count=()=>{
      setTimeout(()=>{
       const point=points.shift()
       if(point){ 
          setPosition(point)
          if(points.length!==0){
            count()
          }else{   
            setTimeout(() => {
              onComplete&&onComplete()
            }, 500);     
         
          } 
        }
        },1000/48)
    }
    count()

    // let timer = setInterval(() => {
      
    //   if (point) {
    //     setPosition(point)
    //   } else {
    //     console.log('aaaa')
    //     setTimeout(()=>{
    //       clearInterval(timer)
    //       onComplete && onComplete()
    //     },1000)
    //   } 
    // }, 1000/24)
 
    // worker.postMessage({'Add': 'next'})
  }, []) 
  return (
    <View className='xxm-flyway' style={{ transform: `translate3d(${position[0]-start[0]}px,${position[1]-start[1]}px,0)`,left:`${start[0]}px`,top:`${start[1]}px` }}>
    </View>
  )
}
